<template>
  <div class="container">
    <!-- <div class="box">
      <header class="header">header</header>
      <div class="contnet">content</div>
    </div> -->
    <router-view />
    <router-view name="footer" />
  </div>
</template>
<style lang="scss">
* {
  margin: 0;
  padding: 0;
  list-style: none;
}

html,
body,
#app,
.container {
  width: 100%;
  height: 100%;
}

// html {
//   // font-size:100px; // 相当于 1rem = 100px ，此时rem中html的字体大小是固定的，那么和写px没有什么区别
//   font-size: 26.666666666667vw; // 100 / 375 *100 = 26.666666666667
//   // font-size: 4.2666666666667vw; // 16 / 375 *16 = 4.2666666666667
// }


// @media all and (orientation:landscape) {
//   html {
//     // 怎么去判断是横屏呢？要加一个max-width
//     font-size: 200px; // 在横屏状态下，就不会去自适应，而是写死一个px
//   }
// }

body {
  font-size: 16px;
}

.container {
  display: flex;
  flex-direction: column;
  background: #efefef;
  max-width: 750px; // 大于750px 表示横屏状态 
  margin: 0 auto; // 在横屏下不充满整个屏幕

  .box {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: auto; // 首尾固定，中间自适应

    .header {
      background: rgb(255, 2, 2);
      height: 50px;
    }

    .content {
      flex: 1;
      overflow: auto; // 产生滚动条
    }

  }

  .footer {
    height: 50px; // 50px
    background-color: rgb(182, 180, 180);

    ul {
      width: 100%;
      height: 100%;
      display: flex;
      text-align: center;

      a {
        flex: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-decoration: none;
        color: black;

        &.router-link-exact-active {
          color: red
        }


        span {
          font-size: 24px;
        }
      }
    }
  }
}

.van-submit-bar,
.van-action-bar {
  position: static !important
}

.van-address-list__add {
  max-width: 640px !important;
  margin: 5px auto !important;
}
</style>